import React, {useState, useEffect} from 'react';
import {Row, Col, Card, Select} from 'antd';

function Workbench(props) {
  const {activityApi, dataApi, applyItemHref} = props;
  const [activities, setActivities] = useState([]);
  const [data, setData] = useState({});
  const [activity_id, setActivityId] = useState(undefined);

  useEffect(() => {
    if (activityApi) {
      $request(activityApi).then(res => {
        setActivities(res.data.list)
      });
    }
  }, [activityApi])

  useEffect(() => {
    if (dataApi) {
      $request(dataApi, {activity_id}).then(res => setData(res.data));
    }
  }, [dataApi, activity_id])

  return <div className="workbench">
    <Row gutter={12}>
      <Col span={16}>
        <Card size="small" title="日常活动简报" extra={
          <Select placeholder="请选择活动" value={activity_id} allowClear onChange={setActivityId}
                  style={{width: '300px'}}>
            {
              activities.map(item => <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>)
            }
          </Select>}>
          <div className="bulletin">
            {
              data.bulletin?.map(item => <div key={item.label} className="bulletinItem" onClick={() => {
                if(item.url) {
                  props.env.jumpTo(item.url)
                }
              }}>
                <div className={`${item.icon} icon`} style={{backgroundColor: item.color}}/>
                <div className="content">
                  <div>{item.label}</div>
                  <div>
                    <span className="num">{item.value}</span>
                    <span>{item.after}</span>
                  </div>
                </div>
              </div>)
            }
          </div>
        </Card>
      </Col>
      <Col span={8}>
        <Card size="small" title="最新报名人员">
          <div>
            {
              data.apply_list?.map(item =>
                <a href="javascript:" onClick={() => {
                  if (applyItemHref) {
                    props.env.jumpTo(applyItemHref)
                  }
                }} key={item.id} style={{display: "flex", alignItems: 'center', justifyContent: "space-between", marginTop: '10px', color: '#333'}}>
                  <span><span style={{color: "#c3c3c3"}}>●</span> {item.full_name}</span>
                  <span style={{fontSize: '12px', color: ' #909090'}}>报名时间: {item.created_at}</span>
                </a>)
            }
          </div>
        </Card>
      </Col>
    </Row>
  </div>
}

export default Workbench;
